<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>成都机动车限行查询</title>
		<style>
			#search {
				width: 640px;
				margin: 0 auto;
				text-align: center;
				margin-top: 150px;
			}
			#carno {
				display: inline-block;
				width: 460px;
				height: 36px;
				font: 36px/36px arial;
				text-align: center;
				vertical-align: middle;
				border: none;
				outline: none;
				border-bottom: 1px dotted darkgray;
			}
			#search input[type=button] {
				width: 80px;
				height: 36px;
				font: 28px/36px arial;
				border: none;
				color: white;
				background-color: red;
				vertical-align: middle;
			}
			#result {
				width: 640px;
				margin: 0 auto;
				text-align: center;
				font: 32px/36px arial;
			}
		</style>
	</head>
	<body>
		<div id="search">
			<input type="text" id="carno" placeholder="请输入车牌号">
			<input type="button" value="查询" onclick="showResult()">
			<input type="button" value="清除" onclick="clearResult()">
		</div>
		<hr>
		<p id="result"></p>
		<script>
			const carnoInput = document.getElementById('carno')
			const result = document.getElementById('result')
			const pattern = /^[京津沪渝辽吉黑冀鲁豫晋陕甘闽粤桂川云贵苏浙皖湘鄂赣青新宁蒙藏琼][A-Z]\s*[0-9A-Z]{5}$/i
			
			function clearResult() {
				carnoInput.value = ''
				result.textContent = ''
			}
			
			function showResult() {
				let carno = carnoInput.value.trim()
				if (pattern.test(carno)) {
					let num = getLastDigit(carno)
					if (num) {
						let day = new Date().getDay()
						if (day == 0 || day == 6) {
							result.textContent = '节假日不限行'
						} else if (num % 5 == day || num % 5 == day - 5) {
							result.textContent = carno + '今日限行'
						} else {
							result.textContent = carno + '今日不限行'
						}
						return
					}
				}
				alert('请输入有效的车牌号')
			}
			
			function getLastDigit(carno) {
				let len = carno.length
				for (let i = len - 1; i >= len - 5; i -= 1) {
					if ('0' <= carno[i] && carno[i] <= '9') {
						return parseInt(carno[i])
					}
				}
			}
		</script>
	</body>
</html>